import Taro from '@tarojs/taro'
import { cancelCollectService } from '@/api/collect'
import Styles from './index.module.scss'
import { CollectInfo } from './type'

interface CollectItemProps {
  item: CollectInfo
  updateCollectList: () => void
}

export default function HotItem(props: CollectItemProps) {
  //取消收藏
  const cancelCollect = () => {
    cancelCollectService(props.item.id).then(() => {
      // 取消收藏成功后，更新收藏列表
      // 这里可以调用父组件的方法来更新收藏列表
      Taro.showToast({
        title: '取消收藏成功',
        icon: 'success',
      })
      props.updateCollectList()
    })
  }

  const handleEnterProductDetailPage = () => {
    Taro.navigateTo({
      url: `/pages/productDetail/index?id=${props.item.id}`,
    })
  }

  const showToast = (e) => {
    e.stopPropagation()
    Taro.showToast({
      title: '已抢光',
      icon: 'none',
    })
  }

  return (
    <div className={Styles.hot_item}>
      <div className={Styles.left}>
        <div className={Styles.hot_img}>
          <img src={props.item.coverUrl} alt='' className={Styles.img_hot} />
        </div>
      </div>

      <div className={Styles.right}>
        <div className={Styles.hot_title}>{props.item.name}</div>
        <div className={Styles.hot_price}>
          <span className={Styles.moneyIcon}>¥</span>
          {props.item.price}
        </div>
        <div className={Styles.right_bottom}>
          {/* <div className={Styles.buy_btn}>
            <button className={Styles.btn}>
              <span
                className={Styles.word}
                onClick={handleEnterProductDetailPage}
              >
                去购买
              </span>
            </button>
          </div> */}
          {props.item.isOver ? (
            <div className={Styles.buy_btn}>
              <button className={Styles.btn_over} onClick={showToast}>
                <span className={Styles.word}>已抢光</span>
              </button>
            </div>
          ) : (
            <div className={Styles.buy_btn}>
              <button
                className={Styles.btn}
                onClick={handleEnterProductDetailPage}
              >
                <span className={Styles.word}>去购买</span>
              </button>
            </div>
          )}
          <div className={Styles.star_box} onClick={cancelCollect}>
            <img
              src={require('../../../src/assets/collect/star.png')}
              alt=''
              className={Styles.star}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
